<template>
	<view class="content">
		<view class="header_imgs">
			<image src="../../static/homeLogo.jpg" mode=""></image>
		</view>

		<view class="main" v-for="(item, index) in _data.cardData" :key="index">
			<view class="card_title">
				<image class="card_title_icon" :src="item.icon" mode=""></image>
				<text>
					{{ item.content }}
				</text>
			</view>
			<view class="card">
				<view
					v-for="(t, i) in item.children"
					:key="i"
					@click="onClick(t.path)"
					class="card_content"
				>
					<image class="card_title_icon" :src="t.icon" mode=""></image>
					<text>
						{{ t.content }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'

const _data = reactive({
	cardData: [
		{
			icon: '../../static/小程序图标/管理中心.png',
			content: '管理中心',
			children: [
				{
					icon: '../../static/小程序图标/64x64/预约挂号.png',
					content: '预约挂号',
					path: 'pages/view/subscribeRegistration/index',
				},
				{
					icon: '../../static/小程序图标/64x64/接诊列表.png',
					content: '接诊列表',
					path: 'pages/view/clinicalReception/index',
				},
				{
					icon: '../../static/小程序图标/64x64/医生接诊.png',
					content: '医生接诊',
					path: 'pages/view/doctorVisit/doctorVisit',
				},
				{
					icon: '../../static/小程序图标/64x64/收费管理.png',
					content: '收费管理',
					path: 'pages/view/feeRecords/index',
				},
				{
					icon: '../../static/小程序图标/64x64/患者管理.png',
					content: '患者管理',
					path: 'pages/view/patient/index',
				},
				// {
				// 	icon: "../static/小程序图标/64x64/采购入库.png",
				// 	content: "我的消息",
				// 	path: "",
				// },
				{
					icon: '../../static/小程序图标/64x64/模板管理.png',
					content: '模板管理',
					path: 'pages/template/index',
				},
			],
		},
		{
			icon: '../../static/小程序图标/药房管理.png',
			content: '药房管理',
			children: [
				{
					icon: '../../static/小程序图标/64x64/药房发药.png',
					content: '药房发药',
					path: 'pages/dispensing/index',
				},
				{
					icon: '../../static/小程序图标/64x64/药品零售.png',
					content: '药品零售',
					path: 'pages/retail/index',
				},
				{
					icon: '../../static/小程序图标/64x64/零售记录.png',
					content: '零售记录',
					path: 'pages/retailrecords/index',
				},
				{
					icon: '../../static/小程序图标/64x64/添加药品.png',
					content: '新增药品',
					path: 'pages/view/drugsAdded/index',
				},
				{
					icon: '../../static/小程序图标/64x64/采购入库.png',
					content: '采购入库',
					path: 'pages/view/purchase/index',
				},
				{
					icon: '../../static/小程序图标/64x64/库存盘点.png',
					content: '库存盘点',
					path: 'pages/view/InventoryCount/index',
				},
				{
					icon: '../../static/小程序图标/64x64/采购入库.png',
					content: '新增记录',
					path: 'pages/view/addRecord/index',
				},
				{
					icon: '../../static/小程序图标/64x64/入库记录.png',
					content: '入库记录',
					path: 'pages/view/warehousing/index',
				},
				{
					icon: '../../static/小程序图标/64x64/盘点记录.png',
					content: '盘点记录',
					path: 'pages/view/Inventory/index',
				},
			],
		},
	],
})

const onClick = (url) => {
	if (url) {
		uni.navigateTo({
			url: '/' + url,
		})
	}
}
</script>

<style lang="scss">
.content {
	background-color: #efefef;
	padding: 20rpx;
}

.header_imgs {
	image {
		width: 100%;
		height: 450rpx;
	}
}

.main {
	background-color: #ffffff;
	margin-top: 15rpx;
	display: flex;
	flex-wrap: wrap;
	border-radius: 6rpx;

	.card_title {
		padding: 20rpx 0 10rpx 20rpx;

		text {
			padding: 4rpx 8rpx 0;
		}

		.card_title_icon {
			vertical-align: middle;
			width: 35rpx;
			height: 35rpx;
		}
	}

	.card {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.card_content {
			display: flex;
			flex-wrap: wrap;
			width: 33%;
			padding: 20rpx;
			box-sizing: border-box;

			image {
				margin: 0 auto;
				width: 100rpx;
				height: 100rpx;
			}

			text {
				margin-top: 6rpx;
				width: 100%;
				text-align: center;
			}
		}
	}
}
</style>